<?php

use yii\helpers\Url;
use yii\helpers\Html;
use website\helpers\Render;
use common\models\Recharge;
use common\models\UserBond;

$this->addCrumbs('资金管理');
$this->title = '保证金管理';
?>
<style>
    #flyer-create,
    #flyer-recharge {padding:20px;background-color:#eee;}
    #designer img {float:left;width:120px;height:120px;margin-right:20px;}
    #order-title {height:30px;line-height:30px;margin-bottom:30px;font-size:18px;}
    #flyer-create .form-item {margin-bottom:5px !important;background-color:#fff;}
    #flyer-create .input-title {background-color:#fff !important;}
    .input-mid {padding-left:10px !important;}
    #alipay, #wechat {position:relative;padding:10px;border:1px solid #ccc;background-color:#eee;cursor:pointer;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay .selected, #wechat .selected {position:absolute;top:50%;right:10px;width:6px;height:6px;margin-top:-6px;border-radius:10px;border:3px solid #aaa;}
    #alipay.active, #wechat.active {background-color:#fff;}
    #alipay.active .selected, #wechat.active .selected {border-color:#f00;}
</style>

<div class="contenter">
    <?= $this->render('/user/navigator', ['active' => 'bond']) ?>

    <div id="user-contenter">
        <div class="box-shadow" id="sub-contenter">
            <div class="data-title"><span class="h3"><?= $this->title ?></span></div>
            <div class="data-content flyer-form pane">
                <div class="data-mind">注意：芝麻信用分满700分可以免除部分保证金，保证金可申请退回</div>
                <?php if( ! Yii::$app->user->bond()) { ?>
                <div class="mt-20px" id="flyer-create">
                    <div id="order-title"><i class="icon-th-list cl-red"></i> 订单信息</div>
                    <div class="form-item">
                        <div class="input-title">保证金</div>
                        <div class="input-block input-mid">1,000.00 元</div>
                    </div>
                </div>
                <div class="mt-20px" id="flyer-recharge">
                    <div id="order-title"><i class="icon-th-list cl-red"></i> 请选择支付方式</div>
                    <div class="form-item"><div class="active" id="alipay" data-platform="<?= Recharge::PlatformAlipay ?>">支付宝<span class="selected"></span></div></div>
                    <div class="form-item"><div id="wechat" data-platform="<?= Recharge::PlatformWeChat ?>">微信<span class="selected"></span></div></div>
                    <div class="form-item">
                        <div class="input-block tr bdn">
                            <button class="flyer-button normal border-round" id="recharge-button" type="submit">立即缴纳</button>
                        </div>
                    </div>
                    <textarea id="flyer-create-json" data-form="#sub-contenter" style="display:none;"><?= UserBond::checker() ?></textarea>
                    <input type="hidden" id="platform" name="platform" value="<?= Recharge::PlatformAlipay ?>">
                </div>
                <?php } else { ?>
                <div class="mt-20px" id="flyer-create">
                    <div class="form-item">
                        <div class="input-title">保证金</div>
                        <div class="input-block input-mid"> <span class="flyer-status red thin">您已缴纳保证金</span></div>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
    </div>
</div>
<div id="recharge-form" style="display:none;"></div>

<script src="<?= Render::static('flyer/flyer.class.js') ?>"></script>
<script src="<?= Render::static('flyer/checker.class.js') ?>"></script>
<script src="<?= Render::static('flyer/tableHandler.class.js') ?>"></script>
<script>
    $(document).ready(function() {
        // 表单美化
        (new flyer).init({ form: '#flyer-create' });

        $('#alipay, #wechat').bind('click', function() {
            $('#alipay, #wechat').removeClass('active');
            $(this).addClass('active');
            $('#platform').val($(this).data('platform'));
        });
        
        // 充值按钮
        tableHandler.requestSingle({
            button: '#recharge-button', isConfirm: false, isShadow: true, isAlert: false, isAsync: false,
            url: "<?= Url::to('@web/designer/bond-recharge') ?>",
            beforeRequest: function(param) {
                param.data = { platform: $('#platform').val() };
            },
            requestSuccess: function (param) {
                layer.confirm(param.response.message, {
                    btn: ['已充值成功', '充值遇到问题？']
                }, function() {
                    window.location.href = "<?= Url::to('@web/designer/bond') ?>";
                }, function() {
                    window.location.href = "<?= Url::to('@web/designer/employment-list') ?>";
                });
                var _form = $('<div>' + param.response.javascript + '</div>');
                $(_form).find('form').attr('target', '_blank');
                $('#recharge-form').append(_form);
            }
        });
    });
</script>